<template>
<!-- 	<div class="top">
	<button class="button-set" @click="toset"><img src="/static/set.png" width="30px"></button>
	<button class="button-message" @click="tonotice"><img src="/static/notice.png" width="25px"></button>
	</div> -->
	<view>
		<div class="top">
		<img src="/static/set.png" width="30px" class="button-set" @click="toset">
		<img src="/static/notice.png" width="25px" class="button-message" @click="tonotice">
		</div>
		<img :src="saveUserForm.imgUrl" width="50px" style="border-radius: 50%;border: 1px solid black;" @click="tomydata">
		<br>
		<input type="text" v-model="saveUserForm.name" disabled>
		<input type="text" v-model="saveUserForm.content" disabled>
	</view>
	<!-- 粉丝关注被赞卡片 -->
	<view class="card">
	<uni-card :data="cardArr">
		<uni-col :span="8" prop="like_count"><input type="text" v-model="saveUserForm.fansCount" disabled><text>粉丝</text></uni-col>
		<uni-col :span="8" prop="follow_count"><input type="text" v-model="saveUserForm.followCount" disabled><text>关注</text></uni-col>
		<uni-col :span="8"><input type="text" v-model="saveUserForm.likeCount" disabled><text>被赞</text></uni-col>
	</uni-card>
	</view>
	<!-- 中间四个按钮 -->
	<uni-row class="middle">
		<uni-col :span="6">
			<view>
				<button class="image-button" @click="topet">
				<img src="/static/pet.png" width="30px">
				</button>我的宠物
			</view>
		</uni-col>
		<uni-col :span="6">
			<view>
				<button class="image-button" @click="toorder">
					<img src="/static/order.png" width="30px">
					</button>服务订单
			</view>
		</uni-col>
		<uni-col :span="6">
			<view>
				<button class="image-button" @click="toevaluate">
					<img src="/static/evaluate.png" width="30px">
					</button>我的评价
			</view>
		</uni-col>
		<uni-col :span="6">
			<view>
				<button class="image-button" @click="tolove">
					<img src="/static/love.png" width="30px">
					</button>我的点赞
			</view>
		</uni-col>
	</uni-row>
	<!-- 下面 -->
	<uni-list>
		<!-- <uni-list-item clickable thumb="/static/pet.png" showArrow @click="toindex2"
			title="我的宠物" />
		<uni-list-item clickable thumb="/static/paw.png" showArrow @click="toindex2"
			title="我的宠物" />
		<uni-list-item clickable thumb="/static/order.png" showArrow @click="toindex2"
			title="服务订单" />
		<uni-list-item clickable thumb="/static/evaluate.png" showArrow @click="toindex2"
			title="我的评价" />
		<uni-list-item clickable thumb="/static/love.png" showArrow @click="toindex2"
			title="我的点赞" /> -->
		<uni-list-item clickable thumb="/static/release.png" showArrow @click="torelease"
			title="我的发布" />
		<uni-list-item clickable thumb="/static/foster.png" showArrow @click="tofoster"
			title="我的寄养" />
		<!-- <uni-list-item clickable thumb="/static/message.png" showArrow @click="toindex2"
			title="消息通知" />
		<uni-list-item clickable thumb="/static/set.png" showArrow @click="toset"
			title="设置" /> -->
	</uni-list>
</template>

<script setup>
	import { onMounted,ref} from "vue";
	import {selectclient} from "@/api/my.js"
	// // 在页面中导入相关 api 
	// import {
	// 	orderById,
	// } from "@/api/order.js";

	// // 定义存储请求的结果
	// // const order = ref([]);
	//保存卡片数据
	const cardArr = ref([])
	//定义对象用来保存用户弹窗表单数据
	const saveUserForm = ref({
	  id: '',
	  username: '',
	  password: '',
	  name: '',
	  email:'',
	  phone:'',
	  age: '',
	  gender: '',
	  createTime: '',
	  updateTime: '',
	  imgUrl: '',
	  content: '',
	  likeCount:'',
	  followCount:'',
	  fansCount: ''
	})
	//一进入页面就加载
	onMounted(()=>{
	  select();
	})
	// 从 localStorage 获取数据
	const clientId = localStorage.getItem('userid');
	const select =async () => {
		let res = await selectclient(1);
		console.log(res);
		console.log(res.data[0]);
		saveUserForm.value = res.data[clientId-1];
	}
	// // 也买你加载完毕执行
	// onMounted(() => {
	// 	// 调用函数
	// 	getOrder();
	// })
	// // 封装函数，调用 api
	// const getOrder = async () => {
	// 	let res = await orderById(1);
	// 	console.log(res);
	// }
	const toset=() => {
		uni.navigateTo({
			url: "/pages/set/set"
		})
	}
	const tonotice=() => {
		uni.navigateTo({
			url: "/pages/notice/notice"
		})
	}
	const torelease=() => {
		uni.navigateTo({
			url: "/pages/release/release"
		})
	}
	const tofoster=() => {
		uni.navigateTo({
			url: "/pages/foster/foster"
		})
	}
	const tolove=() => {
		uni.navigateTo({
			url: "/pages/love/love"
		})
	}
	const toevaluate=() => {
		uni.navigateTo({
			url: "/pages/evaluate/evaluate"
		})
	}
	const toorder=() => {
		uni.navigateTo({
			url: "/pages/order/order"
		})
	}
	const topet=() => {
		uni.navigateTo({
			url: "/pages/pet/pet"
		})
	}
	const tomydata=() => {
		uni.navigateTo({
			url: "/pages/mydata/mydata"
		})
	}
</script>

<style>
	body {
        /* background-color: lightblue; */
		/* background-size: 100% 100%; */
		/* background-image: linear-gradient(#fccd33,#fff); */
    }
	button {
		/* text-align: left; */
	}
/* 	#b1,#b2 {
		text-align: left;
	} */
	.card {
		text-align: center;
	}
	.middle {
		display: flex;
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */
		text-align: center;
	}
	button.image-button {
	  width: 50px;
	  height: 50px;
	  padding: 8px 16px;
	  display: flex;
	  justify-content: center;
	  align-items: center; /* 垂直居中 */
	  background-color: #fefffe;
	  border-radius: 50px;
	}
	.top {
		position: relative;
	}
	.button-set {
		/* float: right; */
		width: 30px;
		height: 30px;
		padding: 8px 16px;
		display: flex;
		justify-content: center;
		align-items: center; /* 垂直居中 */
		margin: 0;
		/* left: 100px; */
		margin-left: auto;
	}
	.button-message {
		width: 30px;
		height: 30px;
		padding: 8px 16px;
		display: flex;
		justify-content: center;
		align-items: center; /* 垂直居中 */
		position: absolute;
		top: 0px;
		right: 50px;
	}
</style>
